<template>
  <el-form label-position="left" size="mini" label-width="80px" class="base-attrbute">
    <el-form-item label="占位提示：">
      <el-input v-model="value.placeholder" placeholder="请输入占位提示符"></el-input>
    </el-form-item>
    <el-form-item label="下拉尺寸：">
      <el-select v-model="value.size" placeholder="请设置下拉框尺寸">
        <el-option label="大" value="medium"></el-option>
        <el-option label="中" value="small"></el-option>
        <el-option label="小" value="mini"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="禁用：">
      <el-radio-group v-model="value.disabled">
        <el-radio :label="true">禁用</el-radio>
        <el-radio :label="false">非禁用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="清空：">
      <el-radio-group v-model="value.clearable">
        <el-radio :label="true">开启</el-radio>
        <el-radio :label="false">关闭</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="多选：">
      <el-radio-group v-model="value.multiple">
        <el-radio :label="true">开启</el-radio>
        <el-radio :label="false">关闭</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="自动搜索：">
      <el-radio-group v-model="value.filterable">
        <el-radio :label="true">开启</el-radio>
        <el-radio :label="false">关闭</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="选项来源：">
      <el-radio-group v-model="value.source">
        <el-radio :label="true">模板</el-radio>
        <el-radio :label="false">自定义选项</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="分组：">
      <el-radio-group v-model="value.group">
        <el-radio :label="true">开启</el-radio>
        <el-radio :label="false">关闭</el-radio>
      </el-radio-group>
    </el-form-item>
    <template v-if="!value.source">
      <div v-if="value.group">
        <!-- 分组 -->
        <div v-for="(option,index) in value.options" :key="index">
          <label>分组{{index+1}}：</label>
          <dl>
            <dt>
              <el-form-item label="分组名称：">
                <el-input v-model="option.title" placeholder="请输入分组名称"></el-input>
              </el-form-item>
            </dt>
            <dd v-for="(item,key) in option.item" :key="key">
              <!-- <div v-for="(option,sub) in item" :key="sub"> -->
              <span class="attribute-item-title">{{key+1}}、选项</span>
              <el-form-item label="文字：">
                <el-input v-model="item.label" placeholder="请输入下拉选项文字"></el-input>
              </el-form-item>
              <el-form-item label="值：">
                <el-input v-model="item.value" placeholder="请输入下拉选项的值"></el-input>
              </el-form-item>
              <el-form-item label="是否禁用：">
                <el-radio-group v-model="item.disabled">
                  <el-radio :label="true">禁用</el-radio>
                  <el-radio :label="false">非禁用</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-button type="danger" size="mini" style="width: 100%;" @click="delOption(index,key)">删除选择项</el-button>
              <!-- </div> -->
            </dd>
            <el-button type="primary" size="mini" style="width: 100%;" @click="addOption(index)">添加选择项</el-button>
          </dl>
          <el-button type="danger" size="mini" style="width: 100%;" @click="delGroups(index)">删除分组</el-button>
        </div>
        <el-button type="primary" size="mini" style="width: 100%;" @click="addGroups()">添加分组</el-button>
      </div>
      <div v-if="!value.group">
        <!-- 未分组 -->
        <div v-for="(option,index) in value.options[0].item" :key="index">
          <span class="attribute-item-title">{{index+1}}、选项</span>
          <el-form-item label="文字：">
            <el-input v-model="option.label" placeholder="请输入下拉选项文字"></el-input>
          </el-form-item>
          <el-form-item label="值：">
            <el-input v-model="option.value" placeholder="请输入下拉选项的值"></el-input>
          </el-form-item>
          <el-form-item label="是否禁用：">
            <el-radio-group v-model="option.disabled">
              <el-radio :label="true">禁用</el-radio>
              <el-radio :label="false">非禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-button type="danger" size="mini" style="width: 100%;" @click="delOption(index)">删除选择项</el-button>
        </div>
        <el-button type="primary" size="mini" style="width: 100%;" @click="addOption()">添加选择项</el-button>
      </div>
    </template>
  </el-form>
</template>
<script type="text/javascript">
export default {
  created() {

  },
  props: {
    value: [Array, Object]
  },
  components: {
    //Logo
  },
  data() {
    return {
      /**
       * @placeholder 站位提示符
       * @disabled   是否禁用
       * @clearable  是否开启清空
       * @multiple   是否开启多选
       * @group      是否开启分组
       * @filterable 是否支持搜索
       * @source     选项来源
       * @options    选项内容
       * @type {Object}
       */
      // form:{
      //   placeholder:'请选择内容',
      //  disabled:false,
      //  clearable:true,
      //  multiple:false,
      //  group:false,
      //  filterable:true,
      //   source:true,
      //   options:[{
      //     label:"",
      //     value:"",
      //     disabled:false,
      //   }],
      // },
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    "value.group": {
      handler(val, old) {
        if (!val) {
          var data = JSON.parse(JSON.stringify(this.value.options[0]));
          this.value.options = [];
          this.value.options.push(data);
        }
      },
      deep: true,
    }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    /**
     * 添加自定义选项
     */
    addOption(index) {
      var obj = {
        label: "",
        value: "",
        disabled: false,
      }

      if (!this.value.group) {
        this.value.options[0].item.push(obj)
      } else {
        this.value.options[index].item.push(obj)
      }
    },

    /**
     * 删除自定义选项
     */
    delOption(index, key) {
      if (!this.value.group) {
        this.value.options[0].item.splice(index, 1)
      } else {
        this.value.options[index].item.splice(key, 1)
      }
    },

    /**
     * 添加分组
     */
    addGroups() {
      var obj = {
        title: "",
        item: [{
          label: "",
          value: "",
          disabled: false,
        }]
      }
      this.value.options.push(obj);
      // console.log('添加分组');
    },
    /**
     * 删除分组
     * @param  {[type]} index [description]
     * @return {[type]}       [description]
     */
    delGroups(index) {
      this.value.options.splice(index, 1)
    }
  }
}

</script>
<style type="text/css" lang="scss">
.base-attrbute {
  padding: 10px;

  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }

  .el-button {
    margin-bottom: 10px;
  }

  .attribute-item-title {
    font-size: 12px;
  }

  dl {
    margin-top: 10px;
    padding: 15px 0px;
    border-top: dashed 1px #efefef;
  }

  .el-form--label-top .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0;
  }

  .el-form-item__label,
  .el-form-item__content {
    font-size: 12px !important;

  }

}

</style>
